<template>
    <div class="wBox">
        <div class="box1">
            <div ref="main"></div>
        </div>
        <div class="box2">
            <div ref="main2"></div>
        </div>
        <div class="box3">
            <div ref="main3"></div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

const main = ref(null);
const main2 = ref(null);
const main3 = ref(null);
const datas = require(`../../public/jiangsu.json`);
let dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动', '能', '够', '自', '动', '缩', '放'];
// prettier-ignore
let data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
let yMax = 500;
let dataShadow = [];
for (let i = 0; i < data.length; i++) {
    dataShadow.push(yMax);
}
onMounted(() => {
    // 解决警告
    Object.defineProperty(main.value, 'clientWidth', { get: function () { return 500; } })
    Object.defineProperty(main.value, 'clientHeight', { get: function () { return 300; } })
    Object.defineProperty(main2.value, 'clientWidth', { get: function () { return 500; } })
    Object.defineProperty(main2.value, 'clientHeight', { get: function () { return 300; } })
    Object.defineProperty(main3.value, 'clientWidth', { get: function () { return 600; } })
    Object.defineProperty(main3.value, 'clientHeight', { get: function () { return 600; } })
    const myChart = echarts.init(main.value);
    const myChart2 = echarts.init(main2.value);
    const myChart3 = echarts.init(main3.value);
    echarts.registerMap("jiangsu", datas);

    myChart.setOption({
        title: {
            text: '特性示例：渐变色 阴影 点击缩放',
            subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
        },
        xAxis: {
            data: dataAxis,
            axisLabel: {
                inside: true,
                color: '#fff'
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            z: 10
        },
        yAxis: {
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#999'
            }
        },
        dataZoom: [
            {
                type: 'inside'
            }
        ],
        series: [
            {
                type: 'bar',
                showBackground: true,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#83bff6' },
                        { offset: 0.5, color: '#188df0' },
                        { offset: 1, color: '#188df0' }
                    ])
                },
                emphasis: {
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#2378f7' },
                            { offset: 0.7, color: '#2378f7' },
                            { offset: 1, color: '#83bff6' }
                        ])
                    }
                },
                data: data
            }
        ]
    });
    const zoomSize = 6;
    myChart.on('click', function (params) {
        console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
        myChart.dispatchAction({
            type: 'dataZoom',
            startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
            endValue:
                dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
        });
    });


    myChart2.setOption({
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                padAngle: 5,
                itemStyle: {
                    borderRadius: 10
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 12,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 1048, name: 'Search Engine' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' },
                    { value: 300, name: 'Video Ads' }
                ]
            }
        ]
    })

    myChart3.setOption({
        geo: {
            map: 'jiangsu',
            layoutCenter: ['50%', '50%'],
            layoutSize: '150%',
            zoom: 0.6,
            roam: false,
            label: {
                show: true,
                color: '#fff'
            },
            itemStyle: {
                areaColor: '#73C0DE',
                shadowColor: 'rgba(142, 201, 205, 1)',
                shadowOffsetX: -3,
                shadowOffsetY: 5
            },
            emphasis: {
                itemStyle: {
                    areaColor: '#5B7AD7',
                    borderWidth: 1
                },
                label: {
                    show: true,
                    color: '#fff',
                    fontSize: 18,
                    fontWeight: 600
                },
            },

        },
        series: [
            {
                name: 'City',
                type: 'scatter',
                coordinateSystem: 'geo',
                data: [
                    { name: '南京', value: [118.78, 32.04, 100] }
                ],
                symbolSize: 20,
                itemStyle: {
                    color: '#fff',
                    shadowBlur: 10,
                    shadowColor: 'rgba(0, 0, 0, 0.3)',
                    shadowOffsetX: 2,
                    shadowOffsetY: 2,
                },
            },
        ],

    });




});
</script>


<style lang="scss" scoped></style>